<template>
  <div>
    <div v-if="permission==3" class="margin-b10">
      <el-button size="mini" @click="bulkHandle(1)">批量发布</el-button>
      <el-button size="mini" @click="bulkHandle(-1)">批量取消发布</el-button>
      <el-button size="mini" @click="bulkHandle(2)">批量移除</el-button>
    </div>
    <el-table :data="paperData"  v-loading="listLoading"  @selection-change="handleSelectionChange"
              element-loading-text="加载中..." row-key="paperMainId"
              :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
              fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
        <el-table-column type="selection" align="center" label="全选">

        </el-table-column>
        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column width="180" align="center" label="创建时间">
            <template slot-scope="scope">
              <span>{{scope.row.createdAt}}</span>
            </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="排序(前端展示)">
            <template slot-scope="scope">
              <span>{{scope.row.sort}}</span>
            </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="是否已完成编辑">
            <template slot-scope="scope">
               <span v-if="scope.row.hasComplete == 1">是</span>
               <span v-else>否</span>
            </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="计分方式">
            <template slot-scope="scope">
              <span v-if="scope.row.scoringMethod==1">正确率</span>
              <span v-else>总分</span>
            </template>
        </el-table-column>
        <el-table-column width="80"  align="center" label="测试人数">
            <template slot-scope="scope">
              <span>{{scope.row.examPeopleNum}}</span>
            </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="是否发布">
            <template slot-scope="scope">
              <span v-if="scope.row.isGrounding==1">是</span>
              <span v-else>否</span>
            </template>
        </el-table-column>
          <el-table-column width="200" align="center" label="操作">
            <template slot-scope="scope">
              <div class="text-alignL">
              <b @click="toPreview(scope.row.paperMainId)">预览</b><span v-if="permission==3" class="color-409">|</span>
            <router-link v-if="permission==3" :to="{path:'/testManage/editPaper/' + scope.row.paperMainId + '/' + topicId} ">
             <b >编辑</b>
            </router-link><span v-if="permission==3" class="color-409">|</span>
              <b v-if="permission==3" @click="linkToSubject(scope.row.paperMainId)">题目设置</b>
              </div>
              <div v-if="permission==3" class="text-alignL">
                <b @click="toRemove(scope.row.paperMainId)">移除</b><span class="color-409">|</span>
              <b v-show="scope.row.isGrounding=='-1'" @click="certainPublish(scope.row.paperMainId,1)">发布</b>
              <b v-show="scope.row.isGrounding=='1'"  @click="certainPublish(scope.row.paperMainId,2)">取消发布</b>
              </div>
                </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
      <!--分页组件 current-page:当前页   -->
      <!--   page-sizes:每页几条数据（选项）   -->
      <!--   page-size:每页几条数据   -->
      <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
			</div>
     <previewPaper v-show="isShowPreview"   @hidePreview="hidePreview" :paperId="this.paperId"></previewPaper>
  </div>
</template>
<script>
import { toGetPapers, tobulkHandle, toRemoveInTopic, handlePaper } from '@/api/paper'
import previewPaper from '../../paper/components/previewPaper.vue'
export default {
  components: { previewPaper },
  props: ['listQuery', 'paperData', 'permission'],
  data() {
    return {
      listLoading: false,
      topicId: null,
      paperIdArr: null,
      isShowPreview: false,
      paperId: null,
      condition: null,
      tip: null
    }
  },
  created() {
    this.topicId = this.$route.params.topicId
    if (this.paperData) {
      console.log('sdsdaaq' + this.topicId)
    }
  },
  methods: {
    getPaperInTopic(listQuery) {
      this.listLoading = true
      // 根据ID查找该专题下得试卷
      toGetPapers(listQuery).then(res => {
        // 正确回调
        this.paperData = res.data.data.data
        this.listQuery.total = res.data.data.total
        this.listLoading = false
      })
        .catch(err => {
          console.log(err)
        })
    },
    certainPublish(thePaperId, type) {
      if (type == 1) {
        this.tip = '发布'
      } else if (type == 2) {
        this.tip = '取消发布'
      } else if (type == 3) {
        this.tip = '移除'
      }

      this.$confirm('确定' + this.tip + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
        center: true
      }).then(() => {
        this.listLoading = true
        // 根据ID查找该专题下得试卷
        this.condition = { 'thePaperId': thePaperId, 'type': type }
        handlePaper(this.condition).then(res => {
        // 正确回调
          this.getPaperInTopic(this.listQuery)
          this.listLoading = false
          this.$message({
            type: 'success',
            message: this.tip + '成功!'
          })
        })
          .catch(err => {
            console.log(err)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '用户取消'
        })
      })
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getPaperInTopic(this.listQuery)
    },
    handleCurrentChange(val) { // 切换当前页
      // 切换当前页码的方法
      this.listQuery.page = val
      this.getPaperInTopic(this.listQuery)
    },
    handleSelectionChange(val) {
      // 复选框选择操作 将topicId存进数组 实时变化
      this.multipleSelection = val
      this.paperIdArr = []
      val.forEach((row, index) => {
        this.paperIdArr.push(row.paperMainId)
      })

      console.log(this.paperIdArr)
    },
    linkToSubject(id) {
      this.$router.push({ path: `/testManage/subject/${id}`, query: {}})
    },
    timeLoading() {
      this.listLoading = false
    },
    bulkHandle(val) {
      // 批量操作的方法执行
      if (val == 1) {
        this.tip = '发布'
      } else if (val == -1) {
        this.tip = '取消发布'
      } else {
        this.tip = '移除'
      }
      if (this.paperIdArr.length == 0) {
        this.$message({
          type: 'error',
          message: '至少选择一条数据'
        })
        return
      }
      this.$confirm('确定' + this.tip + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行将复选框选中的专题全部上架
        var data = { paperIdArr: this.paperIdArr, type: val, topicId: this.topicId }
        tobulkHandle(data)
          .then(res => {
            if (res.data.statusCode == 200) {
              this.$message({
                type: 'success',
                message: this.tip + '成功!'
              })
              this.getPaperInTopic(this.listQuery)
            } else {
              this.$message({
                type: 'error',
                message: this.tip + '失败!'
              })
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    toRemove(paperId) {
      var data = { paperId: paperId, topicId: this.topicId }
      console.log(data)
      this.$confirm('确定移除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 根据ID查找该专题下得试卷
        toRemoveInTopic(data).then(res => {
          // 正确回调
          this.$message({
            type: 'success',
            message: '移除成功!'
          })
          this.getPaperInTopic(this.listQuery)
        })
          .catch(err => {
            console.log(err)
          })
      })
    },
    toPreview(paperId) {
      this.isShowPreview = true
      this.paperId = paperId
    },
    hidePreview(msg) {
      this.isShowPreview = msg
    }
  }
}
</script>

